<template>
  <div class="menuMain">
      <Icon class="shrinkButton" :type="shrinkIcon" size="24" color="#50b354" @click="shrink" />
      <ul  id="card">
        <li
          v-for="(item,index) in menuList"
          :key="index"
          class="card-item"
          :id="item.name"
          
        > 
          <div v-if="item.children.length != 0">
            <div @click="openChildMenu(item,index)" style="display: flex;">
              <div   style="width: 100%;" >
                <Icon  class="card-item-icon"  :type = 'item.icon.type'></Icon>
                <span  v-show="!(ifShrink)" class="card-item-word">
                    <span :count="3">
                      {{item.title}}
                    </span>
                </span>
              </div>
              <Icon v-show="ifArrow&&!ifShrink"  :type="item.arrow" style="float: right;" />
            </div>
          
            <div   v-show="item.ifOpenChildMenu&&!ifShrink" class="childrenMenu">
                <ul>
                  <li
                    v-for="(childItem,index) in item.childrenMenuList"
                    :key="index"
                    class="childrenCard-item"
                    @click="changeMenu(childItem.id,childItem.pid)"
                    :id = "childItem.id+childItem.name">
                    <div :id="childItem.id+childItem.name + 'span'">
                      <Icon  type="ios-send-outline"  class="childrenCard-item-icon"   ></Icon>
                      <span v-show="!(ifShrink)" class="childrenCard-item-word" >
                        {{ childItem.name }}
                      </span>
                    </div>
                  </li>
                </ul>
            </div>
          </div>
          <div v-else>
            <div :id = "item.name+item.title" @click="changeMenu(item.name, 0)" style="display: flex; width: 100%;">
              <div :id="item.name + 'span'" style="display: flex;justify-content: flex-start;width: 100%;">
                <Icon  :type="item.icon.type"  class="card-item-icon"   ></Icon>
                <div v-show="!(ifShrink)" class="card-item-word" >
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
  </div>
</template>
<script>
import util from "../../src/api/util";

export default{
  name:"sideBar",
  props:{
      activeName:{
          type:String,
          default:'device'
      },
  },
  data(){
      return {
        ifArrow:true,
        ifChildMenu:false,
        arrowDirection:'ios-arrow-down',
        backlogTotal:0,
        menuList:[],
        openNames:['user','data','option'],
        shrinkIcon:"md-arrow-dropleft",
        ifShrink:false,
        selectedMenu:"",
        selectedpMenu:""
      }
  },
  beforeMountmounted(){
    //this.$router.push({name:'home'});
    
    
    
  },
  mounted(){
    let menuList = JSON.parse(localStorage.getItem("menuList"));
    for(let i = 0; i < menuList.length; i ++){
      let icon = menuList[i].icon
      menuList[i].icon = { type: icon, size: "16"};
      menuList[i].arrow = 'ios-arrow-down';
    }
    this.menuList = menuList;
    setTimeout(() => {
      let name = localStorage.getItem("currentMenuId") == null ? "home" : localStorage.getItem("currentMenuId");
      //console.log(name);
      this.changeMenu( name, 0)
    }, 100);
    
  },
  methods:{
      changeMenu(name,pid){
          localStorage.setItem("currentMenuId", name)
          if(name != this.$router.currentRoute.id){
            this.$router.push({
                name:name + "_index"
            });
          }
          
          if(this.selectedMenu != "" ){
            let lastMenu = document.getElementById(this.selectedMenu);
            var lastWord = document.getElementById(this.selectedMenu+"span");
            lastMenu.style.backgroundColor = "#ffffff"; 
            lastWord.style.color = "#202332"; 
          }
          let menu = document.getElementById(name);
          console.log(name);
          let word = document.getElementById(name+"span")      
          menu.style.backgroundColor = "#c6dfc8";   
          word.style.color = "#ffffff";
          this.selectedMenu = name;
          this.selectedpMenu = pid;
          //console.log('this.selectedMenu2',this.selectedMenu);

      },
      shrink(){
        this.ifShrink = !(this.ifShrink);
        this.ifArrow = !(this.arrow);
        this.$emit('ifShrink',this.ifShrink)
        let menu = document.getElementById("card")
        let icon = document.getElementsByClassName("shrinkButton");
        
        if(this.ifShrink){
          menu.style.width = "20%"
          this.shrinkIcon = "md-arrow-dropright";
          icon[0].style.right = "78%"
        }else{
          menu.style.width = "100%"
          this.shrinkIcon = "md-arrow-dropleft";
          icon[0].style.right = "1%"
        }
      },
      
      openChildMenu(item,index){
        //ole.log(index);
        item.ifOpenChildMenu = !item.ifOpenChildMenu
        if(item.ifOpenChildMenu == true){
          item.arrow  = 'ios-arrow-up'
        }else{
          item.arrow = 'ios-arrow-down'
        }
      }
  }
}
</script>
<style lang="less">
.menuMain{
z-index: 9999;
  position: absolute;
  width: 13%;
  height: 95%;
  left:0px;
  top:4.5%;
  .shrinkButton{
    position: absolute;
    //padding-left: 6%;
    right: 5%;
    top: 44%;
    z-index: 9998;
    transition: right 0.5s;
  }
  .shrinkButton:hover{
    cursor: pointer;
  }

  #card {

    //width: 100%;
    //position:abloute;
    padding-top: 13px;
    padding-left: 8px;
    //-right: 8px;
    //transition: width 0.5s;
    //margin-right: 50px;
    overflow: hidden;
    height:100%;
    background-color: rgb(255, 255, 255);
    //border-radius:20px;
    .card-item{

      position: relative;
      width:96%;
      list-style: none;
      //height: 37px;
      padding: 10px ;
      border-radius:6px;
      cursor: pointer;
      .demo-badge-alone{
          background: #fdc390 !important;
          color: #ffffff;
          //width: 15px;
          //height: 15px;
      }
      .card-item-word{
        //transform: translate3d(0, 0, 0);
        //overflow-x: hidden;
        //color:#202332;
        font-family: Microsoft YaHei,Arial, Times, serif;
        font-weight: bold;
        font-size: 13px;
        margin-left: 15%;
      }
      
    }
    .childrenMenu{
         color: #434343;
         .childrenCard-item{
            position: relative;
            width:96%;
            list-style: none;
            //height: 37px;
            padding: 10px ;
            border-radius:6px;
            cursor: pointer;
            //background-color: rgb(231, 239, 234);
            .demo-badge-alone{
                //background: #e6000c !important;
                background: #ffd0a8 !important;
                color: #ffffff;
                //width: 15px;
                //height: 15px;
            }
            .childrenCard-item-word{
              //transform: translate3d(0, 0, 0);
              //overflow-x: hidden;
              width: 30px;
              //color:#202332;
              font-family: Microsoft YaHei,Arial, Times, serif;
              //font-weight: bold;
              font-size: 12px;
              margin-left: 5px;
            }
            .childrenCard-item-icon{
              color:#50b354;
              padding-left: 25%;
              //color:#d4e2d4aa
            }
         }

      }
    .childrenCard-item:hover{
      //background-color: #fdfaee;
      .childrenCard-item-word{
        //transform: translate3d(0, 0, 0);
        //overflow-x: hidden;
        width: 30px;
        //color:#202332;
        font-family: Microsoft YaHei,Arial, Times, serif;
        font-weight: bold;
        font-size: 12px;
        margin-left: 10px;
        color:#797878;
      }
      .childrenCard-item-icon{
        color:#50b354;
        padding-left: 25%;
        //color:#d4e2d4aa
      }
      
    }
//color: rgb(250, 255, 240);
    
    
  }
}
</style>